<template>
  <div id="home">
    <el-container>
      <el-aside width="auto" style="height: 100%">
        <el-menu :default-active="this.$route.path" style="height: 100%" router>
          <el-menu-item
            v-for="(item, i) in navList"
            :key="i"
            :index="item.name"
          >
            <template slot="title">
              <i :class="item.icon"></i>
              <span> {{ item.navItem }}</span>
            </template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      navList: [
        {
          name: '/components/TemperatureTrend',
          icon: 'el-icon-s-marketing',
          navItem: '发热趋势',
        },
        {
          name: '/components/DistributionMap',
          icon: 'el-icon-picture',
          navItem: '人员分布',
        },
        {
          name: '/components/Report',
          icon: 'el-icon-s-data',
          navItem: '测温报告',
        },
        {
          name: '/components/UserInfo',
          icon: 'el-icon-user',
          navItem: '人员管理',
        },
      ],
    }
  },
}
</script>

<style scoped>
.el-container {
  padding: 0px;
  margin: 0px;
  height: 100vh;
}
</style>
